<template>
  <div v-loading="settleDetailLoading" class="settleDetail">
    <ContentWrap>
      <List :column="4" sep="：" label-width="100">
        <ListItem label="订单总金额" :value="orderInfo.orderTotalAmount" />
        <ListItem label="优惠金额" :value="orderInfo.discountAmount" />
        <ListItem label="应收金额" :value="orderInfo.receivableAmount" />
        <ListItem label="退货金额" :value="orderInfo.returnedAmount" />
        <ListItem label="抹零" :value="orderInfo.fraction" />
        <ListItem label="已收金额" :value="orderInfo.receivedAmount" />
        <ListItem label="未清金额" :value="orderInfo.collectRetainage" />
      </List>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import { List, ListItem } from '@/components/List'
export default {
  components: {
    ContentWrap,
    List,
    ListItem
  },
  props: {
    orderInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      settleDetailLoading: true,
      data: []
    }
  },
  created() {
    this.settleDetailLoading = false
  }
}
</script>

<style lang="scss" scoped>
.settleDetail {
  width: 100%;
  height: auto !important;
}
.settleDetail .content-wrap {
  padding: 10px 20px;
}
.settleDetail .content-wrap /deep/ .el-row .el-col {
  line-height: 32px;
}
.settleDetail .content-wrap /deep/ .el-row .custom-list-item {
  margin-bottom: 0;
}
.settleDetail .content-wrap /deep/ .el-row .custom-list-item .label-style {
  text-align-last: right;
}
.settleDetail .content-wrap /deep/ .el-row .custom-list-item span:first-child {
  width: auto;
  font-size: 12px;
  text-align: right;
}
.settleDetail .content-wrap /deep/ .el-row .custom-list-item span:last-child {
  font-size: 12px;
}
</style>
